<template>
  <el-table
    :data="props.data"
    v-loading="loading"
    :header-cell-style="{ 'text-align': 'left' }"
  >
    <el-table-column
      v-for="item of props.columns"
      :key="item.id"
      :label="item.label"
      :prop="item.prop"
      :min-width="item.width"
      align="left"
      :slot-scope="{ row }"
    >
      <template v-if="!item.slotName" #default="{ row }">
        <el-tooltip
          effect="light"
          content-class="tooltip-content"
          placement="left"
          :content="item.format ? item.format(row[item.prop]) : row[item.prop]"
          popper-class="popper-tooltip"
          :disabled="disabled"
          :show-after="1000"
        >
          <div slot="content">
            <div class="cell-ellipsis" ref="cellEllipsis">
              <span class="content">{{
                item.format ? item.format(row[item.prop]) : row[item.prop]
              }}</span>
            </div>
          </div>
        </el-tooltip>
      </template>
      <template v-if="item.slotName" #default="{ row }">
        <slot :name="item.slotName" :row="row"> </slot>
      </template>
      <template #header="{ column }">
        <template v-if="item.slotHeader">
          <slot :name="item.slotHeader"></slot>
        </template>
        <template v-else>
          {{ column.label }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ref, defineEmits, onMounted, watch, computed } from 'vue'
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 0
  },
  loading: {
    typr: Boolean,
    default: false
  },
  currentPage: {
    type: Number,
    default: 1
  }
});
</script>

<style scoped></style>
